<template>
  <div ref="myChart" style="height: 100%" />
</template>
<script>
export default {
  name: 'DashPie',
  props: {
    dataR: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      myChart: undefined,
      colorList: ['#cdfb81', '#ffc760', '#ff7b7b', '#b884cd', '#81d3f8', '#65b1ff', '#1b7df1', '#3370b9'],
      to:'sjxmzygl-xmgdgl',
    }
  },
  created() {
  },
  mounted() {
    this.drawLine()
    window.addEventListener('resize', this.resize)
  },
  methods: {
    drawLine() {
      this.myChart = this.$echarts.init(this.$refs.myChart)
      const sum = this.dataR.length && this.dataR.reduce((sum, item) => sum + Number(item.value), 0)

      this.myChart.on('click', (param) => {
        const { dataIndex } = param
        this.jumpTo({
          to: this.to,
          zyprotype: this.dataR[dataIndex].proTypeId
        })
      })

      this.myChart.setOption({
        title: {
          text: `${sum}`,
          textStyle: {
            fontSize: 26,
            fontWeight: 'bold'
          },
          top: '42.5%',
          left: '48%',
          subtext: '已完成',
          subtextStyle: {
            fontSize: 13
          },
          textAlign: 'center'
        },
        color: this.colorList,
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            radius: ['37%', '60%'],
            center: ['49%', '50%'],
            padAngle: 2,
            avoidLabelOverlap: true,
            labelLine: {
              length: 35,
              length2: 20,
              lineStyle: {
                color: 'rgba(217,217,217,0.7)'
              }
            },
            labelLayout: {
             /* hideOverlap: false,
              height:80,
              align:'center',
              verticalAlign:'middle',*/
              draggable: true,
            },
            label: {
              show: true,
              formatter: '{a|{b}}\n{c|{c}}{x|个}',
              rich: {
                a: {
                  lineHeight: 15,
                  align: 'center',
                  fontSize: 11
                },
                c: {
                  lineHeight: 20,
                  fontSize: 15,
                  align: 'center',
                  verticalAlign: 'middle'
                },
                x: {
                  align: 'center',
                  verticalAlign: 'middle',
                  lineHeight: 20,
                  fontSize: 11
                }
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            data: this.dataR || []
          },
          {
            type: 'pie',
            itemStyle: {
              normal: {
                color: '#e9e9e9'
              }
            },
            silent: true, // 取消高亮
            radius: ['69.5%', '70%'],
            center: ['49%', '50%'],
            hoverAnimation: false, // 取消动画效果
            z: -1
          }
        ]
      })
    },

    resize() {
      this.myChart.resize()
    },

    jumpTo(record) {
      this.$router.push({ name: record.to, params: { zyprotype: record.zyprotype } })
    },
  },

  beforeDestroy() {
    window.removeEventListener('resize', this.resize)
  }
}
</script>

<style scoped>
</style>
